<template>
  <div class="add">
    <div>
      <h1>商品添加</h1>
    </div>
    <el-form ref="goodsData" :model="goodsData" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="goodsData.name"></el-input>
      </el-form-item>
      <el-form-item label="商品种类">
        <el-radio-group v-model="goodsData.classify">
          <el-radio label="主粮"></el-radio>
          <el-radio label="零食"></el-radio>
          <el-radio label="玩具"></el-radio>
          <el-radio label="日常用品"></el-radio>
          <el-radio label="药品"></el-radio>
          <el-radio label="其它"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="适用宠物">
        <el-radio-group v-model="goodsData.pet">
          <el-radio label="全部"></el-radio>
          <el-radio label="狗"></el-radio>
          <el-radio label="猫"></el-radio>
          <el-radio label="其它"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="goodsData.price"></el-input>
      </el-form-item>

      <el-form-item label="重量">
        <el-input v-model="goodsData.weight"></el-input>
      </el-form-item>

      <el-form-item label="生产日期">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="goodsData.production"
            style="width: 100%;"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="保质期">
        <el-input v-model="goodsData.shelfLife"></el-input>
      </el-form-item>
      <el-form-item label="产地">
        <el-input v-model="goodsData.producer"></el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-upload
          class="avatar-uploader"
          action="/images/temp"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="temp" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-button @click="sure">确认上传</el-button>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input type="textarea" v-model="goodsData.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("goods");

export default {
  data() {
    return {
      // 临时图片路径
      localhost: "http://localhost:3001/temp/",
      // 永久图片路径
      localhost1: "http://localhost:3001/images/",
      permanent_image:"",
      imageUrl: "",
      newimages: "",
      goodsData: {
        name: "啥狗粮", // 名称
        classify: "主粮", // 商品种类（主粮/零食/玩具/日常用品/药品...）
        pet: "狗", // 适用宠物（全部/猫/狗/其他）
        price: "50", // 价格
        weight: "3", // 重量
        production: "2019-12-03", // 生产日期
        shelfLife: "1年", // 保质期
        producer: "四川。射洪", // 产地
        imageUrl: "", // 商品图片（列表图/详情图...）
        desc: "123" // 商品描述
      }
    };
  },
  methods: {
    ...mapActions(["addgoods"]),
    onSubmit() {
    
   let  adminsId= JSON.parse(localStorage.usertoken1)._id;
console.log(adminsId);

      this.addgoods({
        name: this.goodsData.name, // 名称
        classify: this.goodsData.classify, // 商品种类（主粮/零食/玩具/日常用品/药品...）
        pet: this.goodsData.pet, // 适用宠物（全部/猫/狗/其他）
        price: this.goodsData.price, // 价格
        weight: this.goodsData.weight, // 重量
        production: this.goodsData.production, // 生产日期
        shelfLife: this.goodsData.shelfLife, // 保质期
        producer: this.goodsData.producer, // 产地
        images: this.permanent_image, // 商品图片（列表图/详情图...）
        desc: this.goodsData.desc ,// 商品描述
        adminsId
      });
      alert("添加成功")
    },

    handleAvatarSuccess(res, file) {
      this.newimages = res;
      // 设置上传图片的地址
      this.imageUrl = this.localhost + res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //确认上传
    sure() {
     if(this.newimages) {
      
           axios.post("/images/images", { imagesPath: this.newimages }).then(res => {
        if (res.data) {
             this. permanent_image=this.localhost1+this.newimages
        }
      });
     }
      
    
    }
  }
};
</script>


<style>
.temp {
  width: 80px;
  height: 80px;
}
.add {
  width: 600px;
  margin: auto;
  background-color: #fff;
  border-radius: 30px;
  padding: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>